<template>
  <div class="p-4">
    <div class="module-box">
      <div class="module-item" v-for="c in classIfy" :key="c.id">
        <div class="item-header">
          <h2 class="item-header-title">
            <router-link to="/a">
              <span class="title-zh">{{ c.title }}</span>
              <span class="title-en">{{ c.enTitle }}</span>
            </router-link>
          </h2>
          <div>
            <el-radio-group v-model="radio2" class="sofast-radio-group">
              <el-radio-button v-for="t in c.tags" :key="t.id" :label="t.title" :value="t.id" />
            </el-radio-group>
          </div>
        </div>
        <div class="item-main mt-4">
          <div class="movie-box" v-if="c.videos?.length">
            <el-row :gutter="20">
              <el-col :span="3" v-for="v in c.videos" :key="v.id">
                <div class="movie-poster-item movie-item">
                  <router-link to="/video/204095/" :title="v.title">
                    <div class="movie-item-cover">
                      <div class="movie-item-note">{{ v.desc }}</div>
                      <div class="movie-item-pic"><img referrerpolicy="no-referrer" :src="v.pic" :alt="v.title">
                      </div>
                    </div>
                    <div class="movie-poster-item-info">
                      <div class="movie-poster-item-title">{{ v.title }}</div>
                    </div>
                  </router-link>
                </div>
              </el-col>
            </el-row>
          </div>
          <div v-else class="bg-white">
            <el-empty description="空空如也" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { RouterLink } from 'vue-router';

const classIfy = ref([{
  id: 1,
  title: "电影",
  enTitle: "MOVIES",
  tags: [{
    id: 1,
    title: '推荐'
  }, {
    id: 2,
    title: '院线热映'
  }, {
    id: 3,
    title: '喜剧'
  }, {
    id: 4,
    title: '爱情'
  }, {
    id: 5,
    title: '恐怖'
  }, {
    id: 6,
    title: '动作'
  }, {
    id: 7,
    title: '科幻'
  }, {
    id: 8,
    title: '动画'
  }, {
    id: 9,
    title: '剧情'
  }],
  videos: [{
    id: 1,
    title: '裂战',
    desc: 'HD',
    pic: "https://pic9.iqiyipic.com/image/20240305/61/21/v_175601938_m_601_m3_579_772.jpg"
  }, {
    id: 2,
    title: '花千骨',
    desc: 'HD',
    pic: "https://pic0.iqiyipic.com/image/20240305/14/a4/v_175226589_m_601_m4_579_772.jpg"
  }, {
    id: 3,
    title: '周处除三害',
    desc: 'HD',
    pic: "https://m.ykimg.com/0584000065767FE6C847B712C1DA1D40"
  }]
}, {
  id: 1,
  title: "电视剧",
  enTitle: "TV SHOWS",
  tags: [{
    id: 1,
    title: '推荐'
  }, {
    id: 2,
    title: '国产剧'
  }, {
    id: 3,
    title: '美剧'
  }, {
    id: 4,
    title: '日剧'
  }, {
    id: 5,
    title: '韩剧'
  }, {
    id: 6,
    title: '短剧'
  }]
}])
const radio2 = ref('1')
</script>

<style lang="less" scoped>
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  &-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    position: relative;
    z-index: 2;
    flex: 1;

    .title-en {
      transition: color .3s ease;
      opacity: .12;
      background: -webkit-linear-gradient(90deg, transparent, #e50914);
      background-clip: text;
      -webkit-text-fill-color: transparent;
      white-space: nowrap;
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: 38px;
      z-index: -1;
    }
  }
}

.movie-box {

  .movie-item {
    position: relative;
    display: block;
    font-size: 14px;
    padding-bottom: 20px;

    &>a {
      display: block;

      .movie-item-cover {
        transition: box-shadow .15s ease;
        position: relative;
        height: 0;
        padding-top: 140%;
        background-position: 50% 50%;
        background-size: cover;
        overflow: hidden;
        border-radius: 8px;

        .movie-item-note {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 1;
          background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
          padding: 50px 5px 10px;
          pointer-events: none;
          color: #fff;
          font-weight: 500;

          text-align: center;
          font-size: 12px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .movie-item-pic,
        .movie-item-pic img {
          height: 100%;
          width: 100%;
        }

        .movie-item-pic img {
          top: 0;
          left: 0;
          object-fit: cover;
          position: absolute;
        }


      }

      .movie-poster-item-info {
        margin-top: 12px;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}
</style>